<template>
	<view class="stadiumbox">
		<!-- <view @click="handblack" class="blackbox">
			<image class="blackimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17107328943811032.png"></image>
		</view> -->
		<x-scroll
			@scroll="scroll"
			:fixed="true"
			:isNav="true"
			@scrolltolower="scrolltolower"
			:refresh="true"
			:heightFix="80"
			:autoHeight="true"
		>
			<view class="load" v-if="!load">
				<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
			</view>

			<view v-else>
				<view class="positionbox">
					<view class="Backgroundbox" @click="uni.navigateBack()">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17103974949781099.png" class="logo"></image>
					</view>
					<view class="qiuchangxiangxi">
						<view class="namebox">
							<view>
								<text class="name">{{ place.ShopName }}</text>
								<image class="authenimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710574867844803.png"></image>
							</view>
							<!--  #ifdef MP-WEIXIN -->
							<button hover-class="none" open-type="share" plain="true">
								<view class="c_icon">
									<image
										class="cimg"
										src=" https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105661885861455.png"
										mode=""
									></image>
								</view>
							</button>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<button hover-class="none" @click="app_share" plain="true">
								<view class="c_icon">
									<image
										class="cimg"
										src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105661885861455.png"
										mode=""
									></image>
								</view>
							</button>
							<!-- #endif -->
						</view>
						<view class="describe">
							<text v-if="toggle" class="describetext">{{ place.Description ? place.Description : '当前球场未有简绍' }}</text>
							<text v-else class="describetext2">{{ place.Description ? place.Description : '当前球场未有简绍' }}</text>
							<view v-if="place.Description && place.Description.length > 38" :class="toggle ? 'expand' : 'retract'" @click="onexpand">
								<text class="expandtext">全文</text>
								<image
									v-if="toggle"
									class="expandimg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105662490661328.png"
								></image>
								<image v-else class="expandimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711679435607517.png"></image>
							</view>
						</view>
						<view class="underlinebox"></view>
					</view>
				</view>

				<view class="qiuchangmodule2">
					<view class="timebox">
						<text class="timecolor">营业时间：{{ place.WorkTime == null ? '暂时未知' : place.WorkTime }}</text>
						<view v-if="place.WorkTime" class="borderR"></view>
						<view v-if="place.WorkTime && place.ServerPhone" @click="callNumber">
							<image class="callimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105663066231291.png"></image>
						</view>
					</view>
					<view v-if="place.Address" class="addressbox">
						<view class="addresstitle">地址:</view>
						<view v-if="place.Address.length < 18" class="addressname1">{{ place.Address }}</view>
						<view v-else class="addressname">{{ place.Address }}</view>
						<view class="distancebox" @click="autoGetLocation(place)">
							<text class="distance">{{ distance }}km</text>
							<image class="distanceimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710566335408813.png"></image>
						</view>
					</view>
					<view class="underlinebox"></view>
				</view>
				<view class="cardlist">
					<view class="title2">近期组局</view>
					<view class="title2bottom"></view>
					<view v-if="list2.length > 0">
						<view class="cardbox" v-for="(item, index) in list2" :key="index" @click="gotowrap(item.ID)">
							<view class="titlebox">
								<text class="title">{{ item.Title }}</text>
								<text v-if="item.Status == 0" class="statecolor1">报名中</text>
								<text v-if="item.Status == 1" class="statecolor1">进行中</text>
								<text v-if="item.Status == 2" class="statecolor2">已发奖励</text>
								<text v-if="item.Status == 3" class="statecolor2">已结束</text>
							</view>
							<view class="briefbox">
								<text class="brief">{{ item.brief }}</text>
							</view>
							<view class="timebox2">
								<view class="time">{{ getTime2(item.ServerDate) + ' ' + getWeek(item.ServerDate) + item.ServerTime }} 开始</view>
								<view v-if="item.Place != ''" class="address">{{ item.Place }}</view>
							</view>
							<view class="avatbox">
								<view class="avatarbox">
									<image style="height: 32rpx; width: 32rpx; border-radius: 50%" :src="item.UserImgs"></image>
									<view class="name">{{ item.Name == null ? '' : item.Name }}</view>
								</view>
								<view style="display: flex" v-if="item.Item != null">
									<view class="avatarlist" v-for="(value, i) in item.Item.slice(0, 2)" :key="i">
										<image style="height: 32rpx; width: 32rpx; border-radius: 50%" :src="value.HeadImgUrl" mode="aspectFill" />
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<text class="zerolist">该场地最近无组局</text>
					</view>
				</view>
			</view>
		</x-scroll>
		<view class="reservebox">
			<button class="reserve" @click="gotoballadd">立即预订</button>
		</view>
		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!--  #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: 0,
			place: null,
			flag: true,
			info: {},
			uid: null,
			index: 1,
			size: 10,
			load: false,
			label: ['高大上', '高大上', '高大上', '高大上'],
			toggle: true,
			detailedaddress: '天河区天河路299号(体育中心地铁站C口步行42米)',
			list2: [],
			nowLng: null,
			nowLat: null,
			distance: null,
			number: 0,
		};
	},
	methods: {
		//跳转页面
		gotoballadd() {
			// const number = 0;
			if (this.place.ShopType == '模拟器') {
				this.number = 2;
			}
			if (this.place.ShopType == '练习场') {
				this.number = 1;
			}
			uni.navigateTo({
				url: `/pages/ball/ball_add?title=${this.place.ShopName}&golfType=${this.number}`,
			});
		},
		gotowrap(id) {
			uni.navigateTo({
				url: `/pages/ball/ball_details?id=${id}`,
			});
		},
		//滚动到底部触发
		scrolltolower() {
			this.getparties();
		},
		scroll(e) {
			const detail = e.detail;
		},
		//组局状态
		getBallStatus() {
			if (l == 0) return '报名中';
			else if (l == 1) return '进行中';
			else if (l == 2) return '已发奖励';
			else if (l == 3) return '已结束';
		},
		//开始时间
		getTime2(tiem) {
			let d = new Date(tiem);
			let timestamp = d.getTime();
			return this.$u.date(timestamp, 'mm-dd');
		},
		getWeek(l) {
			let d = new Date(l);
			let week = d.getDay();
			let weelStr =
				week == 0
					? '星期天'
					: week == 1
					? '星期一'
					: week == 2
					? '星期二'
					: week == 3
					? '星期三'
					: week == 4
					? '星期四'
					: week == 5
					? '星期五'
					: '星期六';
			return weelStr;
		},
		//当前球场组局
		async getparties() {
			let res = await this.$api.post('/Shops/Parties', {
				ID: this.id,
				PageIndex: this.index,
				PageSize: this.size,
				Latitude: this.nowLat,
				Longitude: this.nowLng,
			});
			if (res.data.length > 0) {
				this.index++;
				const a = res.data;
				this.list2 = this.list2.concat(a);
			}
		},
		//计算距离
		getremove() {
			//当前距离
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					uni.setStorageSync('lat', res.latitude);
					uni.setStorageSync('lng', res.longitude);
					// 在这里执行计算距离的操作
				},
			});
			this.nowLng = uni.getStorageSync('lng');
			this.nowLat = uni.getStorageSync('lat');
			//目标距离
			this.$util.getGeocoder(this.place.Address).then((a) => {
				// this.targetlat = a.result.location.lat
				// this.targetlng = a.result.location.lng
				this.getDistance(this.nowLat, this.nowLng, a.result.location.lat, a.result.location.lng);
			});
			//
		},
		getDistance(lat1, lon1, lat2, lon2) {
			const R = 6371; // 地球半径，单位为千米
			const dLat = ((lat2 - lat1) * Math.PI) / 180;
			const dLon = ((lon2 - lon1) * Math.PI) / 180;
			const a =
				Math.sin(dLat / 2) * Math.sin(dLat / 2) +
				Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			const distance = R * c;
			this.distance = distance.toFixed(2); // 保留两位小数
		},

		//获取场所详细
		async getshops() {
			let res = await this.$api.post('/Shop/Detail', {
				ID: this.id,
			});
			this.place = res.data;
			this.load = true;
			this.getremove();
		},
		//返回上一页
		handblack() {
			uni.navigateBack({
				delta: 1,
			});
		},
		//调佣电话
		makeCall() {
			uni.getSetting({
				success: (res) => {
					console.log(res);
					if (res.authSetting['scope.makePhoneCall']) {
						this.callNumber();
					} else {
						uni.authorize({
							scope: 'scope.makePhoneCall',
							success: () => {
								this.callNumber();
							},
							fail: () => {
								uni.openSetting({
									success: (res) => {
										if (res.authSetting['scope.makePhoneCall']) {
											this.callNumber();
										}
									},
								});
							},
						});
					}
				},
			});
		},
		callNumber() {
			uni.makePhoneCall({
				phoneNumber: this.place.ServerPhone,
				success: () => {
					console.log('拨打电话成功！');
				},
				fail: () => {
					console.error('拨打电话失败！');
				},
			});
		},
		//简绍伸缩
		onexpand() {
			this.toggle = !this.toggle;
		},
		//通过地理位置获取经纬度
		autoGetLocation(item) {
			console.log(item);
			this.$util.getGeocoder(item.Address).then((a) => {
				this.openLocation(a.result.location.lat, a.result.location.lng, item);
			});
		},
		//打开地图
		openLocation(latitude, longitude, item) {
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				address: item.Address,
				name: item.ShopName,
				success: function () {
					console.log('success');
				},
				fail: () => {
					this.tui.toast('打开地图失败,请重新打开!');
				},
			});
		},
		//分享
		app_share() {
			this.$refs.share.open();
		},
		sharePYQ() {
			const user = uni.getStorageSync('user');
			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			console.log('share url-----' + shareUrl);

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: user.Name + `向您推荐${this.place.ShopName}`,
				summary: `${this.place.Description}`,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: user.Name + `向您推荐${this.place.ShopName}`,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/court/stadium?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl,
				},
				success: (res) => {
					console.log('success:' + 'pages/court/stadium?id=' + id + '&pid=' + pid);
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		//个人信息
		getuserinfo() {
			const user = uni.getStorageSync('user');
			this.uid = user.UserID;
		},
	},
	mounted() {
		this.getshops();
		this.getparties();
		this.getuserinfo();
	},
	onLoad(e) {
		console.log(e);
		this.id = e.tabInd;
	},
	onShareAppMessage(res) {
		//发送给朋友

		return {
			title: '【场地】向您推荐' + this.place.ShopName,
			path: `/pages/teacher/detail?id=${this.id}&pid=${this.uid}`,
		};
	},
};
</script>
<style lang="less">
page {
	background: #fff;
}
button[plain] {
	border: 0;
}
	.x-share {
		background-color: #ffffff;
		width: 750rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}

.stadiumbox {
	width: 100vw;
	min-height: 100vh;
	position: relative;
}
.blackbox {
	position: fixed;
	left: 30rpx;
	top: 98rpx;
	z-index: 2000;
	.blackimg {
		width: 52rpx;
		height: 52rpx;
	}
}
.positionbox {
	position: relative;
	margin-bottom: 128rpx;
}
.Backgroundbox {
	width: 100%;
	min-height: 287rpx;
	.logo {
		width: 100%;
		height: 650rpx;
	}
}
.qiuchangxiangxi {
	width: 100%;
	min-height: 138rpx;
	box-sizing: border-box;
	padding: 15rpx 36rpx 0 36rpx;
	border-radius: 50rpx 50rpx 0 0;
	background-color: #fff;
	position: absolute;
	bottom: -118rpx;
	z-index: 100;
	left: 0;
	.underlinebox {
		width: 96%;
		margin-left: 1%;
		border-bottom: 1px solid #e4e4e4;
	}
}
.namebox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
	margin-top: 10rpx;
	box-sizing: border-box;
	text-align: center;
	.name {
		width: 80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 32rpx;
		margin-right: 10rpx;
		color: #333333;
		font-weight: 600;
	}
	.authenimg {
		width: 110rpx;
		height: 50rpx;
		vertical-align: middle;
	}
	.authentication {
		font-size: 20rpx;
		color: #ffbc14;
	}
	.c_icon {
		width: 50rpx;
		height: 50rpx;
		position: relative;
		.cimg {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
.labelbox {
	width: 100%;
	display: flex;
}
.label {
	width: 90rpx;
	height: 35rpx;
	box-sizing: border-box;
	padding: 5rpx 0;
	text-align: center;
	margin-right: 8rpx;
	font-size: 22rpx;
	border-radius: 5rpx;
	background-color: #ffeee4;
	color: #f56e1e;
}
.describe {
	margin-top: 10rpx;
	min-height: 78rpx;
	position: relative;
	margin-bottom: 15rpx;
}
.describetext {
	width: 83%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 28rpx;
}
.describetext2 {
	width: 90%;
	font-size: 28rpx;
}
.expand {
	position: absolute;
	right: 20rpx;
	top: 35rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
}
.retract {
	position: absolute;
	right: 0rpx;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	text-align: center;
}
.expandtext {
	font-size: 28rpx;
}
.expandimg {
	width: 20rpx;
	height: 16rpx;
	vertical-align: middle;
}
.qiuchangmodule2 {
	width: 100%;
	min-height: 105rpx;
	box-sizing: border-box;
	padding: 15rpx 36rpx 0 36rpx;
	margin-bottom: 20rpx;
	.underlinebox {
		width: 96%;
		margin-left: 1%;
		border-bottom: 1px solid #e4e4e4;
	}
}
.timebox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
	.timecolor {
		width: 80%;
		color: #333333;
		font-size: 28rpx;
	}
	.borderR {
		height: 30rpx;
		border-right: 1rpx solid #e4e4e4;
		flex: 1;
		margin-right: 10rpx;
	}
	.callimg {
		width: 36rpx;
		height: 34rpx;
		margin-right: 20rpx;
	}
}
.addressbox {
	display: flex;
	margin-bottom: 28rpx;
	color: #333333;
	align-items: center;
	justify-content: space-between;
	.addresstitle {
		width: 12%;
		font-size: 28rpx;
		color: #333333;
	}
	.addressname {
		width: 70%;
		font-size: 28rpx;
		color: #333333;
		box-sizing: border-box;
		padding-top: 25rpx;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}
	.addressname1 {
		width: 70%;
		font-size: 28rpx;
		color: #333333;
		box-sizing: border-box;
		// padding-top: 25rpx;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}
	
}
.detailedaddressbox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-content: center;
	margin-bottom: 30rpx;
}
.detailedaddressomit {
	width: 80%;
	font-size: 24rpx;
	color: #999999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.distancebox {
	display: flex;
	align-items: center;
	height: 40rpx;
	margin-right: 13rpx;
	.distanceimg {
		width: 20rpx;
		height: 20rpx;
	}
}
.distance {
	color: #999999;
	font-size: 24rpx;
	line-height: 40rpx;
	margin-right: 8rpx;
}
.coach {
	margin-bottom: 20rpx;
	color: #333333;
	font-size: 48rpx;
	box-sizing: border-box;
	padding: 0 0 0 16rpx;
}
.cardlist {
	box-sizing: border-box;
	padding: 15rpx 36rpx 20rpx;
	background-color: #fff;
	position: relative;
}

.title2 {
	font-size: 32rpx;
	color: #333333;
	margin-bottom: 32rpx;
	font-weight: 600;
}
.title2bottom {
	width: 48rpx;
	height: 8rpx;
	background-color: black;
	position: absolute;
	left: 71rpx;
	top: 60rpx;
	border-radius: 4rpx;
}
.cardbox {
	width: 100%;
	box-sizing: border-box;
	padding: 26rpx 22rpx;
	border-radius: 20rpx;
	min-height: 144rpx;
	margin-bottom: 20rpx;
	box-shadow: 0px 0px 12rpx 0rpx rgba(0, 0, 0, 0.08);
	.titlebox {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
		}
	}
}
.statecolor1 {
	color: #2ba139;
	font-size: 28rpx;
}
.statecolor2 {
	color: #999999;
	font-size: 28rpx;
}
.briefbox {
	margin-bottom: 20rpx;
	.brief {
		color: #999999;
	}
}
.avatbox {
	display: flex;
	justify-content: space-between;
	padding: 0 10rpx;
	box-sizing: border-box;
}
.avatarbox {
	height: 32rpx;
	display: flex;
	align-content: center;
	.name {
		font-size: 24rpx;
		margin-left: 5rpx;
		color: #666666;
	}
}
.avatarlist {
	height: 32rpx;
	width: 32rpx;
	border-radius: 50%;
}
.timebox2 {
	width: 100%;
	display: flex;
	margin-bottom: 25rpx;
	.time {
		width: 47%;
		height: 50rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 50rpx;
		color: #666666;
		background-color: #f4f6f5;
		border-radius: 5rpx;
		margin-right: 40rpx;
		text-align: center;
	}
	.address {
		width: 40%;
		height: 50rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 50rpx;
		color: #666666;
		background-color: #f4f6f5;
		border-radius: 5rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}
}
.reservebox {
	width: 100%;
	height: 164rpx;
	display: flex;
	justify-content: space-around;
}
.reserve {
	width: 90%;
	height: 92rpx;
	background: linear-gradient(90deg, #3a362d 0%, #151412 100%);
	border-radius: 45rpx;
	position: fixed;
	bottom: 52rpx;
	color: #f9ddaf;
}
</style>
